// 轮播图
class Banner {
	constructor(ele) {
		this.ele = document.querySelector(ele)
		this.imgBox = this.ele.querySelector(".imgBox")
		this.pointBox = this.ele.querySelector(".pointBox")
		this.banner_width = this.ele.clientWidth
		this.index = 1
		this.timer = 0
		this.flag = true
		this.img()
		this.li()
		this.automove()
		this.mouse()
		this.click()
		this.visWindow()
	}
	img() {
		this.first = this.imgBox.firstElementChild.cloneNode(true)
		this.last = this.imgBox.lastElementChild.cloneNode(true)
		this.imgBox.appendChild(this.first)
		this.imgBox.insertBefore(this.last, this.imgBox.firstElementChild)
		this.imgBox.style.width = this.imgBox.children.length * 200 + "%"
		this.imgBox.style.left = -this.banner_width + "px"
	}
	li() {
		const num = this.imgBox.children.length - 2
		for (let i = 0; i < num; i++) {
			const li = document.createElement("li")
			li.classList.add("item")
			if (i === 0) li.classList.add("active")
			li.dataset.id = i
			this.pointBox.appendChild(li)
		}
		this.pointBox.style.width = num * (20 + 5) + "px"
	}
	automove() {
		this.timer = setInterval(() => {
			this.index++
			$(this.imgBox).fadeTo(200, .5, "linear", () => {
				$(this.imgBox).css("left", (-this.index * this.banner_width)).fadeTo(200, 1, "linear", this.moveEnd.call(this))
			})
		}, 4000)
	}
	mouse() {
		this.ele.addEventListener("mouseover", () => clearInterval(this.timer))
		this.ele.addEventListener("mouseout", () => this.automove())
	}
	moveEnd() {
		if (this.index === 0) {
			this.index = this.imgBox.children.length - 2
			this.imgBox.style.left = -this.index * this.banner_width + "px"
		}
		if (this.index === this.imgBox.children.length - 1) {
			this.index = 1
			this.imgBox.style.left = -this.index * this.banner_width + "px"
		}
		for (let i = 0; i < this.pointBox.children.length; i++) {
			this.pointBox.children[i].classList.remove("active")
		}
		this.pointBox.children[this.index - 1].classList.add("active")
		this.flag = true
	}
	click() {
		this.ele.addEventListener("click", e => {
			if (e.target.className === "left") {
				if (this.flag === false) return
				this.flag = false
				this.index--
				$(this.imgBox).fadeTo(200, .5, "linear", () => {
					$(this.imgBox).css("left", (-this.index * this.banner_width)).fadeTo(200, 1, "linear", this.moveEnd.call(this))
				})
			}
			if (e.target.className === "right") {
				if (this.flag === false) return
				this.flag = false
				this.index++
				$(this.imgBox).fadeTo(200, .5, "linear", () => {
					$(this.imgBox).css("left", (-this.index * this.banner_width)).fadeTo(200, 1, "linear", this.moveEnd.call(this))
				})
			}
			if (e.target.className === "item") {
				if (this.flag === false) return
				this.flag = false
				this.index = +e.target.dataset.id + 1
				$(this.imgBox).fadeTo(200, .5, "linear", () => {
					$(this.imgBox).css("left", (-this.index * this.banner_width)).fadeTo(200, 1, "linear", this.moveEnd.call(this))
				})
			}
		})
	}
	visWindow() {
		document.addEventListener("visibilitychange", e => {
			if (document.visibilityState === "hidden") {
				clearInterval(this.timer)
			}
			if (document.visibilityState === "visible") {
				this.automove()
			}
		})
	}
}
new Banner("section>.row>div")
const arr = arr1.goodsFloorData
nav(arr[1], ".top1")
function nav(arr, ele) {
	const res = arr.body
	let str = `
	    <div class="top">
				<p>${res.floor_name}</p>
				<p>${res.more_text}&emsp;<i class="iconfont">&#xe811;</i></p>
			</div>
			<div class="bottom">`

	const left = res.left_ad.items[0]
	str += `
			<div class="col-lg-2">
			<img src="${left.img_url}"                                                                                                                                                                                                                                  >
			</div>`
	const right = res.product_list
	right.forEach(item => {
		str += `
	      <div class="col-lg-2">
	        <img src="${item.img_url}">
	        <div>
						<p class="title">${item.product_name}</p>
						<p class="content">${item.product_brief}</p>
					</div>
	        <span class="current">${item.product_price}元</span>
	      </div>
	      `}
	)
	str += `</div>`
	$(ele).html(str)
}

nav1(arr[2], ".top2")
function nav1(arr, ele, text) {
	const  res = arr.body
	let str = `
    	<div class="top">
				<div>${res.floor_name}</div>
			<div>
			`
	res.tab_content.forEach((item, index) => {

		if (!text) {
			str += `<span data-id="item1" class=${index === 0 ? "active" : ""}>${item.tab_name}</span>`

		} else {
			if (item.tab_name === text) {
				str += `<span data-id="item1" class="active"}>${item.tab_name}</span>
						`
			} else {
				str += `
							<span data-id="item1" >${item.tab_name}</span>
						`}
		}
	})

	str += `
			</div>
			</div>
			<div class="bottom">
			<div class="left">`

	const left = res.left_ad.items[0]

	str += `
			<div class="col-lg-2">
			<img src="${left.img_url}"                                                                                                                                                                                                                                  >
			</div>
			</div><div class="right">`


	let right
	if (!text) {
		right = res.tab_content[0].product_list
	} else {
		right = res.tab_content.find(t => t.tab_name === text).product_list
	}

	if (right.length % 2 === 0) {
		for (let i = 0; i < right.length - 1; i++) {
			str += `
			<div data-id=${right[i].product_id}>
			<img src="${right[i].img_url}">
			<div>
				<p class="title">${right[i].product_name}</p>
				<p class="content">${right[i].product_brief}</p>
			</div>
			<div class="price">
			<span class="current">${right[i].product_price}元</span>
			<del>${right[i].product_price === right[i].product_org_price ? "" : right[i].product_org_price + "元"}</del>
			</div>
		</div>
				`
		}

		str += `<div>
		<div class="top">
			<div>
				<p>${right[right.length - 1].product_name}</p>
				<p>${right[right.length - 1].product_price}元</p>
			</div>
			<div>
				<img src="${right[right.length - 1].img_url}">
			</div>
		</div>
		<div class="bottom">
		<div>
				<p>浏览更多</p>
				<p>${res.floor_name}</p>
			</div>
			<div>
				<i class="iconfont">&#xe741;</i>
			</div></div>
	`
	} else {
		for (let i = 0; i < right.length; i++) {
			str += `
			<div data-id=${right[i].product_id}>
			<img src="${right[i].img_url}">
			<div>
				<p class="title">${right[i].product_name}</p>
				<p class="content">${right[i].product_brief}</p>
			</div>
			<div class="price">
			<span class="current">${right[i].product_price}元</span>
			<del>${right[i].product_price === right[i].product_org_price ? "" : right[i].product_org_price + "元"}</del>
			</div>
		</div>
				`
		}
		str += `<div>
		<div class="bottom">
		<div>
				<p>浏览更多</p>
				<p>${res.floor_name}</p>
			</div>
			<div>
				<i class="iconfont">&#xe741;</i>
			</div></div>`
	}
	$(ele).html(str)
}


for (let i = 3; i < 11; i++) {
	if (i == 5) continue
	if (i == 9) continue
	let num
	switch (i) {
		case 3:
			num = 1
			break;
		case 4:
			num = 2
			break;
		case 6:
			num = 3
			break;
		case 7:
			num = 4
			break;
		case 8:
			num = 5
			break;
		case 10:
			num = 6
			break;
	}

	nav2(arr[i], `.bottom${num}`, i)
}
const main = document.querySelector("main")
main.addEventListener("mouseover", function (e) {
	if (e.target.nodeName === "SPAN" && e.target.dataset.id === "item1") {
		nav1(arr[2], ".top2", $(e.target).text())
		$(e.target).addClass("active").siblings().removeClass("active")
	}
	if (e.target.nodeName === "SPAN" && e.target.dataset.id === "item2") {
		const arrr = +e.target.dataset.arr
		const nu = e.target.dataset.ele
		$(e.target).addClass("active").siblings().removeClass("active")
		nav2(arr[arrr], nu, arrr, $(e.target).text())
		console.log($(e.target).text())
	}
})
function nav2(arr, ele, i, text) {

	const res = arr.body
	let str = `
    	<div class="top">
				<div>${res.floor_name}</div>
			<div>
			`
	res.tab_content.forEach((item, index) => {
		if (!text) {
			str += `<span data-arr=${i}  data-ele="${ele}" data-id="item2" class=${index === 0 ? "active" : ""}>${item.tab_name}</span>`

		} else {
			if (item.tab_name === text) {
				str += `<span data-arr=${i}  data-ele="${ele}" data-id="item2" class="active"}>${item.tab_name}</span>
				`
			} else {
				str += `
					<span data-arr=${i}  data-ele="${ele}" data-id="item2" >${item.tab_name}</span>
				`}
		}
	})



	str += `
			</div>
			</div>
			<div class="bottom">
			<div class="left">`

	const left = res.left_ad.items
	left.forEach(t => {
		str += `
				<div>
					<img src="${t.img_url}">
				</div>`

	})

	str += `</div><div class="right">`
	let right
	if (!text) {
		right = res.tab_content[0].product_list
	} else {
		right = res.tab_content.find(t => t.tab_name === text).product_list
	}

	if (right.length % 2 === 0) {
		for (let i = 0; i < right.length - 1; i++) {
			str += `
			<div data-id=${right[i].product_id}>
			<img src="${right[i].img_url}">
			<div>
				<p class="title">${right[i].product_name}</p>
				<p class="content">${right[i].product_brief}</p>
			</div>
			<div class="price">
			<span class="current">${right[i].product_price}元</span>
			<del>${right[i].product_price === right[i].product_org_price ? "" : right[i].product_org_price + "元"}</del>
			</div>
		</div>
				`
		}
		str += `<div>
			<div class="top">
				<div>
					<p>${right[right.length - 1].product_name}</p>
					<p>${right[right.length - 1].product_price}元</p>
				</div>
				<div>
					<img src="${right[right.length - 1].img_url}">
				</div>
			</div>
			<div class="bottom">
			<div>
					<p>浏览更多</p>
					<p>${res.floor_name}</p>
				</div>
				<div>
					<i class="iconfont">&#xe741;</i>
				</div></div>
		`
	} else {
		for (let i = 0; i < right.length; i++) {
			str += `
			<div data-id=${right[i].product_id}>
			<img src="${right[i].img_url}">
			<div>
				<p class="title">${right[i].product_name}</p>
				<p class="content">${right[i].product_brief}</p>
			</div>
			<div class="price">
			<span class="current">${right[i].product_price}元</span>
			<del>${right[i].product_price === right[i].product_org_price ? "" : right[i].product_org_price + "元"}</del>
			</div>
		</div>
				`
		}
		str += `<div>
			<div class="bottom">
			<div>
					<p>浏览更多</p>
					<p>${res.floor_name}</p>
				</div>
				<div>
					<i class="iconfont">&#xe741;</i>
				</div></div>`
	}
	$(ele).html(str)
}


// 回到顶部
$(window).on('scroll', function () {
	if ($(this).scrollTop() >= 1000) {
		$('.sct').fadeIn('slow')
	} else {
		$('.sct').fadeOut('slow')
	}
})
$('.sct').click(function () {
	$("html").animate({ scrollTop: 0 }, 500);
})

$("aside>.gwc").click(function(){
	window.location.href="./cart.html"
})
$("nav>.row>.col-lg-1>.iconfont").click(function(){
	window.location.href="./list.html"
})


